@import 'theme';
@import 'functions';
@import 'mixins';

$cx-product-search-layout-border-radius: 4px !default;
$cx-product-search-layout-border: 1px solid !default;
$cx-product-search-layout-border-color: 'light' !default;
$cx-product-search-layout-height: 48px !default;
$cx-product-search-layout-background-color: 'secondary' !default;
$cx-product-search-layout-color: 'inverse' !default;
$cx-product-search-layout-trbl-margin: 0 0 0 30px !default;

$cx-product-search-layout-span-height: 20px !default;
$cx-product-search-layout-span-width: 20px !default;
$cx-product-search-layout-span-hover-background-color: 'primary' !default;

$cx-product-search-layout-grid-trbl-padding: 13px 18px 13px 18px !default;
$cx-product-search-layout-grid-mobile-trbl-padding: 13px 12px 13px 12px !default;

$cx-product-search-layout-grid-span-before-background-color: 'inverse' !default;
$cx-product-search-layout-grid-span-before-height: 2px !default;
$cx-product-search-layout-grid-span-before-width: 100% !default;
$cx-product-search-layout-grid-span-before-top: 50% !default;
$cx-product-search-layout-grid-span-before-left: 0 !default;
$cx-product-search-layout-grid-span-before-trbl-margin: -1px 0 0 0 !default;

$cx-product-search-dropdown-trbl-padding: 0 35px 0 0 !default;

$cx-product-search-layout-list-trbl-padding: 13px 18px 13px 18px !default;
$cx-product-search-layout-list-mobile-trbl-padding: 13px 12px 13px 12px !default;
$cx-product-search-layout-list-span-color: 'secondary' !default;
$cx-product-search-layout-list-span-hover-color: 'primary' !default;

$cx-product-search-layout-list-before-font-size: 25px !default;
$cx-product-search-layout-list-before-bottom: 12px !default;

.cx-product-search__layout {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: $cx-product-search-layout-border-radius;
  border: $cx-product-search-layout-border;
  @include var-color('border-color', $cx-product-search-layout-border-color);
  max-height: $cx-product-search-layout-height;

  span {
    position: relative;
    display: inline-block;
    width: $cx-product-search-layout-span-width;
    height: $cx-product-search-layout-span-height;
    overflow: hidden;
  }

  &--grid {
    display: inline-block;
    padding: $cx-product-search-layout-grid-trbl-padding;
    @include var-color('border-color', $cx-product-search-layout-border-color);

    @include media-breakpoint-down(sm) {
      padding: $cx-product-search-layout-grid-mobile-trbl-padding;
    }

    span {
      @include var-color('color', $cx-product-search-layout-color);
      @include var-color(
        'background',
        $cx-product-search-layout-background-color
      );

      &:hover {
        @include var-color(
          'background',
          $cx-product-search-layout-span-hover-background-color
        );
      }

      &:before {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        content: '';
        position: absolute;
        height: $cx-product-search-layout-grid-span-before-height;
        width: $cx-product-search-layout-grid-span-before-width;
        top: $cx-product-search-layout-grid-span-before-top;
        left: $cx-product-search-layout-grid-span-before-left;
        margin: $cx-product-search-layout-grid-span-before-trbl-margin;
        @include var-color(
          'background-color',
          $cx-product-search-layout-grid-span-before-background-color
        );
      }

      &:after {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        content: '';
        position: absolute;
        height: $cx-product-search-layout-grid-span-before-height;
        width: $cx-product-search-layout-grid-span-before-width;
        top: $cx-product-search-layout-grid-span-before-top;
        left: $cx-product-search-layout-grid-span-before-left;
        margin: $cx-product-search-layout-grid-span-before-trbl-margin;
        @include var-color(
          'background-color',
          $cx-product-search-layout-grid-span-before-background-color
        );
      }
    }
  }

  &--list {
    display: inline-block;
    padding: $cx-product-search-layout-list-trbl-padding;

    @include media-breakpoint-down(sm) {
      padding: $cx-product-search-layout-list-mobile-trbl-padding;
    }

    span {
      @include var-color('color', $cx-product-search-layout-list-span-color);

      &:hover {
        @include var-color(
          'color',
          $cx-product-search-layout-list-span-hover-color
        );
      }

      &:before {
        content: '\2630';
        font-size: $cx-product-search-layout-list-before-font-size;
        bottom: $cx-product-search-layout-list-before-bottom;
        position: relative;
      }
    }
  }
}
